<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	
		<link href="${pageContext.request.contextPath}/Sources/icheck-1.x/demo/css/custom.css?v=1.0.2" rel="stylesheet">
		<link href="${pageContext.request.contextPath}/Sources/icheck-1.x/skins/all.css?v=1.0.2" rel="stylesheet">
		<script type="text/javascript" src="${pageContext.request.contextPath}/Sources/js/tools/jquery-1.11.3.min.js"></script>
		<script src="${pageContext.request.contextPath}/Sources/icheck-1.x/icheck.js?v=1.0.2"></script>

		<title>Insert title here</title>
	</head>

	<body>

		<div class="demo-list clear">
			<ul>
				<li>
					<input tabindex="1" type="checkbox" id="input-1">
					<label for="input-1">Checkbox, <span>#input-1</span></label>
				</li>
				<li>
					<input tabindex="2" type="checkbox" id="input-2" checked>
					<label for="input-2">Checkbox, <span>#input-2</span></label>
				</li>
			</ul>
			<ul>
				<li>
					<input tabindex="3" type="radio" id="input-3" name="demo-radio">
					<label for="input-3">Radio button, <span>#input-3</span></label>
				</li>
				<li>
					<input tabindex="4" type="radio" id="input-4" name="demo-radio" checked>
					<label for="input-4">Radio button, <span>#input-4</span></label>
				</li>
			</ul>
			<script>
				$(document).ready(function() {
					
					$('.demo-list input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event) {
						console.log(event.type);
						//callbacks_list.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>');
					}).iCheck({
						checkboxClass: 'icheckbox_square-blue',
						radioClass: 'iradio_square-blue',
						increaseArea: '20%'
					});
				});
			</script>
		</div>

	</body>

</html>